<template>
  <div>
    <el-card style="height: 610px;">
      <quill-editor ref="myQuillEditor" v-model="editor_content" style="height: 500px;" :options="editorOption" @change="onChange">
        <!-- 自定义toolar -->
        <div id="toolbar" slot="toolbar">
          <!-- Add a bold button -->
          <button class="ql-bold" title="加粗">Bold</button>
          <button class="ql-italic" title="斜体">Italic</button>
          <button class="ql-underline" title="下划线">underline</button>
          <button class="ql-strike" title="删除线">strike</button>
          <button class="ql-blockquote" title="引用" />
          <button class="ql-code-block" title="代码" />
          <button class="ql-header" value="1" title="标题1" />
          <button class="ql-header" value="2" title="标题2" />
          <!--Add list -->
          <button class="ql-list" value="ordered" title="有序列表" />
          <button class="ql-list" value="bullet" title="无序列表" />
          <!-- Add font size dropdown -->
          <select class="ql-header" title="段落格式">
            <option selected>段落</option>
            <option value="1">标题1</option>
            <option value="2">标题2</option>
            <option value="3">标题3</option>
            <option value="4">标题4</option>
            <option value="5">标题5</option>
            <option value="6">标题6</option>
          </select>
          <select class="ql-size" title="字体大小">
            <option value="10px">10px</option>
            <option value="12px">12px</option>
            <option value="14px">14px</option>
            <option value="16px" selected>16px</option>
            <option value="18px">18px</option>
            <option value="20px">20px</option>
          </select>
          <select class="ql-font" title="字体">
            <option value="SimSun">宋体</option>
            <option value="SimHei">黑体</option>
            <option value="Microsoft-YaHei">微软雅黑</option>
            <option value="KaiTi">楷体</option>
            <option value="FangSong">仿宋</option>
            <option value="Arial">Arial</option>
          </select>
          <!-- Add subscript and superscript buttons -->
          <select class="ql-color" value="color" title="字体颜色" />
          <select class="ql-background" value="background" title="背景颜色" />
          <select class="ql-align" value="align" title="对齐" />
          <button class="ql-link" title="链接" />
          <!-- <el-upload
            :action="details_url"
            :show-file-list="false"
            :on-success="handleAvatarSuccess_details"
            :before-upload="beforeAvatarUpload"
            multiple
          >
            <el-button class="el-icon-picture" title="图片" />
          </el-upload> -->
          <el-button class="el-icon-picture" @click="dialogVisible=true" title="图库" />
          <!-- <button class="ql-clean" style="position: absolute;top: 32px;" title="还原" /> -->
          <!-- You can also add your own -->
        </div>
      </quill-editor>
    </el-card>
    <el-dialog title="图库" :visible.sync="dialogVisible" :width="isMobile()?'100%':'60%'">
      <picture-library @onClick="onClick" cate_id="4"/>
    </el-dialog>
    <!-- <drawer title="图库" :isShow="dialogVisible"  @update:isShow="dialogVisible=false" width=".4" >
        <picture-library @onClick="onClick" :isUpload="true"/>
    </drawer> -->
  </div>
</template>

<script>
import {
  Quill,
  quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import PictureLibrary from "@/components/UploadPic/PictureLibrary";
// 引入font.css
import '../../assets/css/font.css'

// 自定义字体大小
const Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
Quill.register(Size, true)

// 自定义字体类型
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
  '宋体', '黑体'
]
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)

export default {
  name: 'FuncFormsEdit',
  components: {
    quillEditor,
    PictureLibrary,
  },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      details_url: '',
      dialogVisible: false,
      editor_content: '',
      editorOption: {
        placeholder: '请输入内容',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: {
            container: '#toolbar'
          }
        }
      }
    }
  },
  mounted() {
    this.details_url = process.env.VUE_APP_BASE_API + '/pub/Upload/upload'
  },
  methods: {
    onChange(){
      this.$emit('change')
      this.dialogVisible=false
    },
    handleAvatarSuccess_details(file) {
      this.editor_content = this.editor_content + '' + '<img src=' + file.data.path + ' />'
    },
    onClick(e){
      this.editor_content = this.editor_content + '' + '<img src=' + e + ' />'
    },
    beforeAvatarUpload(file) {
      
      return this.$beforeAvatarUpload(file,2048)
    }
  }
}
</script>

<style scoped>
</style>
